<template>
  <VDialog
    @close="handleClose"
    title="分配人员"
    width="70%"
    @save="save"
    :loading="loading"
  >
    <template #content>
      <div class="radio">
        <el-radio-group v-model="radioType" @change="handleradioType">
          <el-radio
            v-for="item in radioTypeData"
            :key="item.value"
            :label="item.value"
            size="large"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </div>
      <div class="m-[10px] mx-[20px] border border-[#dadce4] rounded-[10px]">
        <div
          v-if="data?.roleName"
          class="bg-[#F6FAFF] text-[#3487FF] text-[14px] text-center leading-[40px] rounded-tl-[10px] rounded-tr-[10px] tracking-[1px] border-b border-b-[#dadce4]"
        >
          {{ data.roleName }}
        </div>
        <div class="m-[10px]">
          <el-cascader
            v-model="searchValue"
            :options="personnelList"
            :props="cascaderProps"
            filterable
            class="w-full"
            placeholder="请搜索"
            @remove-tag="handleRemove"
            :filter-method="customFilterMethod"
          />
        </div>
        <el-cascader-panel
          v-model="personnel"
          :options="personnelList"
          :props="cascaderProps"
          ref="cascaderPanel"
          class="cascaderPanel"
        />
      </div>
    </template>
  </VDialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { organizationList } from "@/api/system/role";
import { cascaderProps, treeToArray, radioTypeData } from "./data";
const props = defineProps({
  data: { type: Object, default: () => {} },
  api: { type: Object, required: true },
});
const { data } = toRefs(props);
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const personnelList = ref([]);
const personnelListAll = ref([]);
const getPersonnel = async () => {
  const { data } = await organizationList();
  personnelList.value = data || [];
  personnelListAll.value = data || [];
};
getPersonnel();
const personnel = ref([]);
const allAuth = ref({});
watch(
  () => data.value?.userData,
  (val) => {
    if (!val?.[radioType.value]?.length) return;
    personnel.value = val[radioType.value] || [];
    allAuth.value = JSON.parse(JSON.stringify(val));
  }
);
const radioType = ref("all");
const handleradioType = async (val) => {
  searchValue.value = []
  personnel.value = allAuth.value[val] || [];
};

const save = async () => {
  switch (radioType.value) {
    case "role_owner":
      break;
    case "user_owner":
      allAuth.value.user_owner = personnel.value;
      break;
    case "all":
      allAuth.value.all = personnel.value;
      allAuth.value.user_owner = allAuth.value.all.filter(
        (item) => !allAuth.value.role_owner?.includes(item)
      );
      break;
  }
  try {
    loading.value = true;
    const { parmas } = data.value;
    const { code, message } = await props.api({
      ...parmas,
      ...allAuth.value,
    });
    if (code !== 200) return ElMessage.error(message);
    ElMessage.success("更新成功!");
    handleClose(true);
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
const customFilterMethod = (node, keyword) => {
  return node.label.toLowerCase().includes(keyword.toLowerCase())
}
const searchValue = ref([]);
watch(
  () => searchValue.value,
  (val) => {
    if (!val.length) return;
    const set = new Set([...personnel.value, ...val]);
    personnel.value = Array.from(set);
  }
);
const handleRemove = (val) => {
  personnel.value = personnel.value.filter((item) => item !== val);
};
const handleClose = async (refresh) => {
  personnel.value = [];
  radioType.value = "all";
  searchValue.value = []
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
<style lang="scss" scoped>
.cascaderPanel {
  overflow: auto;
  height: 400px;
  border: none;
  &:deep(.el-scrollbar__wrap) {
    height: 100% !important;
  }
}
</style>
